{% extends "common/base.html" %}
{% block title %}商品数据{% endblock %}
{% block body%}
    <div style="margin-top: 20px;padding-left: 10px;padding-right: 10px;">
    <form class="layui-form">
        <div class="layui-card">
            <div class="layui-card-header"><h3>商品数据</h3></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品编号</label>
                            <div class="layui-input-block">
                                <input type="text" id="goods_id" name="goods_id" lay-verify="title" autocomplete="off"
                                       placeholder="请输入商品编号"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-block">
                                <input type="text" id="goods_name" name="goods_name" lay-verify="title"
                                       autocomplete="off"
                                       placeholder="请输入商品名称"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品销售量</label>
                            <div class="layui-input-block">
                                <input type="text" id="sales" name="sales" lay-verify="title" autocomplete="off"
                                       placeholder="请输入商品销售量"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品价格</label>
                            <div class="layui-input-block">
                                <input type="text" id="normal_price" name="normal_price" lay-verify="title" autocomplete="off"
                                       placeholder="请输入正常价格"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-btn-container">
            <button id="search" type="button" class="layui-btn layui-btn-normal">查询</button>
            <button type="reset" id="clear" class="layui-btn layui-btn-danger">清空</button>
        </div>
        <table class="layui-hide" id="dataTable"></table>
    </form>
</div>


{%endblock%}
{% block jquery%}
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="reviews">查看评论</a>
</script>
<script>
    $(function () {
        $("#search").click(function () {
            search();
        })
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
        layui.use('table', function () {
            var table = layui.table;
            //监听工具条
            table.on('tool', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layui.use('layer', function () {
                        layer.open({
                            title:'查看['+data.goods_name+']评论',
                            resize:false,
                            area:['1300px','450px'],
                            type: 2,
                            content: ['/goods/jumpOneGoods/'+data.goods_id,'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        });
                    });
                }  else if (obj.event === 'reviews') {
                    document.location = '/goods/jumpToGoodsReviews/'+data.goods_id
                }
            });




            table.render({
                elem: '#dataTable'
                , url: '/goods/getData'
                , method: 'post'
                , height: 350
                , page: true //开启分页
                , limit : 6
                , cellMinWidth: 90 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'goods_id', width: 120, title: '商品ID', sort: true}
                    , {field: 'goods_name', width: 600, title: '商品名称', sort: false}
                    , {field: 'sales', width: 100, title: '销售额', sort: true}
                    , {field: 'price', width: 100, title: '销售价格', sort: true}
                    , {field: 'normal_price', width: 100, title: '正常价格', sort: true}
                    , {field: 'market_price', width: 100, title: '发布价格', sort: true}
                    ,{fixed: 'right', title:'操作', width:178, align:'center', toolbar: '#bar'}
                ]]
            });
        });
    });

    /**
     * 搜索框按钮
     */
    function search(){
        layui.table.reload('dataTable', {
            elem: '#dataTable'
            ,url: '/goods/getData'
            , where: {
                'goods_id':$("#goods_id").val(),
                'goods_name':$("#goods_name").val(),
                'sales':$("#sales").val(),
                'normal_price':$("#normal_price").val()
            } //设定异步数据接口的额外参数
            //,height: 300
        });
    }

</script>
{% endblock %}
